例題2 小さい 円を大きくする
ex01を編集中の人は、ファイルタブから「別名で保存」を選んで、 ex02に名前を変更してください。
code: ex02.js
/*
この例は、幅600、高さ400ピクセルのキャンバスを作り、
その中心に直径10ピクセルの円を描く。
時間の経過とともに円が大きくなる
*/
'use strict';
let diameter=10;
function setup() {
createCanvas(600, 400);
background(220);
frameRate(20); // パラメータは 1秒間に描画するフレームの枚数、最大60、多いほど変化が速い
colorMode(RGB, 255, 255, 255, 1);// カラーの表現、透明度の混乱を避けるためにこのモードを使う
}
function draw() {
diameter += 1; // 直径が1フレームごとに1増えていく
circle(width/2, height/2, diameter); // 直径 diameterの値で円を描く
}
let diameter = 10; // 変数diameterの宣言と値（10 ）の代入
diameter += 1; // diameter を1増やす diameter = diameter + 1 と同等
circleを関数draw()の中に移動
circleの3番目のパラメータ（直径）を400からdiameterに変更。diameterの値を直径として円を描く。draw()が呼ばれるたびにdiameterが１増えるので、円がだんだん大きくなる。
ここでは、変数の使い方を学習します。
変数は使う前に宣言しましょう。宣言しなくても使えますが、混乱を招きやすいので必ず宣言しましょう。
宣言文は、let, var, const がありますが、基本的にletを使いましょう。constは、常に一定の値を保証したい場合に使いましょう。varは使わないでください。もう少し詳しい使い分けはスコープを参照してください。 ここでは、5行目に diameter(直径)を変数として宣言し、10を代入（設定）しています。
draw()関数の定義の2行目：diameter += 1; は、diameterの値を１増やして、同じdiameterに代入する命令文です。その次の行で直径diameterの円を中心に描画しています。つまり、draw()がシステムから呼ばれる毎に、円が1ピクセルづつ大きくなって行きます。
ここで使われている width と height はシステムが用意した変数です。これは、キャンバスの幅と高さが入ってます。それを使うとキャンバスの中心がわかります。
width, height は、勝手に変更できないように const 宣言されています。
ここでの理解事項
変数の宣言と値の代入方法
変数の名前の付け方：アルファベットで始まる英数字と_、ただし大文字と小文字は区別される
変数を宣言する場所とスコープ